<template>
  <div class="box">
    <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft" class="header">
      <template #right>
        <van-icon name="ellipsis" @click="showMark" />
      </template>
    </van-nav-bar>
    <van-overlay :show="show">
      <div class="wrapper" @click="closeMark">
        <div class="block">
          <div @click="goHome">
            <van-icon name="wap-home-o" class="block_icon" />
            <span>主页</span>
          </div>
          <div @click="goUser">
            <van-icon name="contact" class="block_icon" />
            <span>我的聚橙</span>
          </div>
        </div>
      </div>
    </van-overlay>
    <div class="order">
      <div class="wallet" v-if="orderList.length === 0">
        <img src="https://m.juooo.com/static/img/ticket_empty.cf4b072.png" alt="">
        <p>暂无订单,快去首页看看吧<b @click="goHome">去首页</b></p>
      </div>
      <ul class="order_list" v-else>
        <li v-for="(item, index) in orderList" :key="index" @click="goOrderDetails(index)">
          <div class="order_list_top" v-if="item.orderlist[0]">
            <div class="left">
              <h3>{{item.orderlist[0].name}}</h3>
              <h5>{{item.orderlist[0].start_show_time.substring(0,10)}}&nbsp;{{item.orderlist[0].show_time_bottom}}&nbsp;{{item.orderlist[0].start_show_time.substring(11,16)}}</h5>
              <p>{{item.orderlist[0].city_name}}&nbsp;|&nbsp;{{item.orderlist[0].venue_name}}</p>
            </div>
            <div class="right">
              <p v-if="item.status === '0'">未支付</p>
              <p v-else-if="item.status === '1'">待收货</p>
              <p v-else>待评价</p>
              <div>
                <img :src="item.orderlist[0].pic" alt="">
              </div>
            </div>
          </div>
          <div class="order_list_bottom" v-if="item.orderlist[0]">
            <span>￥{{item.totalprice + '.00'}}<b>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{item.orderlist[0].num}}张</b></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, NavBar, Overlay } from 'vant'
import { getOrderList } from '@/api'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Overlay)
export default {
  data () {
    return {
      show: false,
      orderList: []
    }
  },
  mounted () {
    getOrderList({
      userid: localStorage.getItem('userid')
    }).then(res => {
      this.orderList = res.data.data
      // console.log(this.orderList)
    })
    // 解决路由传参跳转不在头部问题！！
    this.$router.afterEach(() => {
      window.scrollTo(0, 0)
    })
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    showMark () {
      this.show = true
    },
    closeMark () {
      this.show = false
    },
    goHome () {
      this.$router.push('/home')
    },
    goOrderDetails (index) {
      this.$router.push({ path: '/orderDetails', query: { orderid: this.orderList[index].orderid } })
    },
    goUser () {
      if (localStorage.getItem('loginState') !== 'ok') {
        this.$router.push('/login')
      } else {
        this.$router.push('/user')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  z-index: 100;
  background: white!important;
}
.wrapper {
  display: flex;
  position: relative;
  height: 100%;
}
.block {
  width: 1.4rem;
  height: 0.9rem;
  position: absolute;
  top: 0.44rem;
  right: 0.05rem;
  border-radius: 0.05rem;
  background-color: #fff;
  div {
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    .block_icon {
      font-size: 0.2rem;
      margin: 0 0.13rem;
      float: left;
      margin-top: 0.1rem;
    }
    span {
      float: left;
    }
  }
  div:nth-of-type(1) {
    border-bottom: 1px solid #f2f2f2;
  }
}
.wallet {
  margin-top: 0.44rem;
  width: 100%;
  height: auto;
  img {
    width: 1.1rem;
    height: 0.77rem;
    display: block;
    margin: 1.4rem auto 0.22rem auto;
  }
  p {
    text-align: center;
    height: 0.18rem;
    line-height: 0.18rem;
    font-size: 0.12rem;
    color: #999999;
    b {
      color: #ff6743;
    }
  }
}
.order_list {
  margin-top: 0.44rem;
  width: 100%;
  height: auto;
  li {
    width: 100%;
    height: 2.12rem;
    border-top: 0.12rem solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    .order_list_top {
      width: 100%;
      height: 1.55rem;
      padding: 0.25rem 0.15rem 0.15rem 0.15rem;
      .left {
        width: 2.3rem;
        height: 100%;
        float: left;
        h3 {
          width: 100%;
          height: 0.4rem;
          line-height: 0.2rem;
          font-size: 0.16rem;
          color: #242424;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        h5 {
          width: 100%;
          height: 0.16rem;
          color: #666666;
          font-size: 0.12rem;
          margin: 0.25rem 0 0.1rem 0;
        }
        p {
          width: 100%;
          height: 0.16rem;
          font-size: 0.12rem;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .right {
        width: 0.6rem;
        height: 100%;
        float: right;
        p {
          width: 100%;
          height: 0.2rem;
          margin-bottom: 0.15rem;
          display: block;
          text-align: right;
          font-size: 0.14rem;
          color: #b3b3b3;
        }
        div {
          border: 1px solid #EBEBEB;
          border-radius: 0.04rem;
          overflow: hidden;
          width: 0.6rem;
          height: 0.79rem;
          img {
            width: 0.58rem;
            height: 0.77rem;
          }
        }
      }
    }
    .order_list_bottom {
      /* width: 3.45rem; */
      height: 0.44rem;
      line-height: 0.44rem;
      margin: 0 0.15rem;
      border-top: 1px solid #ebebeb;
      span {
        font-size: 0.16rem;
        color: #242424;
        font-weight: bold;
        b {
          font-weight: normal;
          font-size: 0.12rem;
          color: #666666;
          line-height: 0.44rem;
        }
      }
    }
  }
}
/deep/ .van-nav-bar {
  border-bottom: 1px solid #ebebeb;
}
/deep/ .van-icon-ellipsis {
  font-size: 0.2rem;
  color: #232323;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: #232323;
}
</style>
